@extends('home.base')
@section('title', '地图找房')
@section('content')
@include('home.header')
<link rel="stylesheet" href="{{asset('static/home/css/animate.css')}}">
<div id="app" v-cloak>
    <div class="map-search">
        <i-select v-model="search.type" style="width:80px" @on-change="handleChangeType">
            <i-option value="new">新房</i-option>
            <i-option value="hand">二手房</i-option>
            <i-option value="rental">租房</i-option>
        </i-select>
        <i-input v-model="search.apartname" search enter-button @on-search="handleSearch" placeholder="请输入楼盘/小区名" style="width: 260px;top:0;margin-right:6px;" ></i-input>
        <i-select v-model="search.ser_area" style="width:100px" @on-change="handleChangeArea" placeholder="区域">
            <i-option :value="search.city.id">@{{ search.city.name }}</i-option>
            <i-option :value="item.id" v-for="item in search.city.childs" :key="item.id">@{{ item.name }}</i-option>
        </i-select>
        <div class="newhouse" v-show="search.type === 'new'">
            <i-select v-model="search.newhouse.ser_average" @on-change="handleChangeOther" style="width:100px" placeholder="均价">
                <i-option value="0">均价不限</i-option>
                <i-option value="1,10000">1万以下</i-option>
                <i-option value="10000,15000">1-1.5万</i-option>
                <i-option value="15000,20000">1.5-2万</i-option>
                <i-option value="20000,25000">2-2.5万</i-option>
                <i-option value="25000,30000">2.5-3万</i-option>
                <i-option value="30000,35000">3-3.5万</i-option>
                <i-option value="40000,999999">4万以上</i-option>
            </i-select>
            <i-select v-model="search.newhouse.ser_pmc" @on-change="handleChangeOther" style="width:110px" placeholder="物业类型">
                <i-option value="0">物业类型不限</i-option>
                <i-option :value="item.id" v-for="item in search.pmcType" :key="item.id">@{{ item.name }}</i-option>
            </i-select>
            <i-select v-model="search.newhouse.ser_status" @on-change="handleChangeOther" style="width:110px" placeholder="销售状态">
                <i-option value="0">销售状态不限</i-option>
                <i-option value="T">在售</i-option>
                <i-option value="W">待售</i-option>
            </i-select>
        </div>
        <div class="handroom" v-show="search.type === 'hand'" style="display: flex;">
            <i-select v-model="search.handroom.ser_price" @on-change="handleChangeOther" style="width:100px" placeholder="价格">
                <i-option value="0">价格不限</i-option>
                <i-option value="1,50">50万以下</i-option>
                <i-option value="50,80">50-80万</i-option>
                <i-option value="80,100">80-100万</i-option>
                <i-option value="100,120">100-120万</i-option>
                <i-option value="120,150">120-150万</i-option>
                <i-option value="150,200">150-200万</i-option>
                <i-option value="200,300">200-300万</i-option>
                <i-option value="300,500">300-500万</i-option>
                <i-option value="500,10000">500万以上</i-option>
            </i-select>
            <i-select v-model="search.handroom.ser_acreage" @on-change="handleChangeOther" style="width:110px" placeholder="面积">
                <i-option value="0">面积不限</i-option>
                <i-option value="1,50">50平米以下</i-option>
                <i-option value="50,70">50-70平米</i-option>
                <i-option value="70,90">70-90平米</i-option>
                <i-option value="90,110">90-110平米</i-option>
                <i-option value="110,130">110-130平米</i-option>
                <i-option value="130,150">130-150平米</i-option>
                <i-option value="150,200">150-200平米</i-option>
                <i-option value="200,2000">200平米以上</i-option>
            </i-select>
            <i-select v-model="search.handroom.ser_room" @on-change="handleChangeOther" style="width:110px" placeholder="户型">
                <i-option value="0">户型不限</i-option>
                <i-option value="1">一室</i-option>
                <i-option value="2">二室</i-option>
                <i-option value="3">三室</i-option>
                <i-option value="4">四室</i-option>
                <i-option value="5">五室及以上</i-option>
            </i-select>
            <i-select v-model="search.handroom.direction" style="width:100px" @on-change="handleChangeOther" placeholder="朝向">
                <i-option value="0">朝向不限</i-option>
                <i-option :value="item.id" v-for="item in search.direct" :key="item.id">@{{ item.name }}</i-option>
            </i-select>
            <i-select v-model="search.handroom.floor" @on-change="handleChangeOther" style="width:110px" placeholder="楼层">
                <i-option value="0">楼层不限</i-option>
                <i-option value="低层">低层</i-option>
                <i-option value="中层">中层</i-option>
                <i-option value="高层">高层</i-option>
            </i-select>
            <i-select v-model="search.handroom.age" @on-change="handleChangeOther" style="width:110px" placeholder="房龄">
                <i-option value="0">房龄不限</i-option>
                <i-option value="1,5">5年内</i-option>
                <i-option value="5,10">5-10年</i-option>
                <i-option value="10,20">10-20年</i-option>
                <i-option value="20,500">20年以上</i-option>
            </i-select>
            <i-select v-model="search.handroom.renovation" @on-change="handleChangeOther" style="width:110px" placeholder="装修">
                <i-option value="0">装修不限</i-option>
                <i-option :value="item.id" v-for="item in search.renovate" :key="item.id">@{{ item.name }}</i-option>
            </i-select>
        </div>
        <div class="rentalhouse" v-show="search.type === 'rental'" style="display: flex;">
            <i-select v-model="search.rentalhouse.ser_price" @on-change="handleChangeOther" style="width:100px" placeholder="月租">
                <i-option value="0">月租不限</i-option>
                <i-option value="1,1500">1500以下</i-option>
                <i-option value="1500,2500">1500-2500</i-option>
                <i-option value="2500,3500">2500-3500</i-option>
                <i-option value="3500,5000">3500-5000</i-option>
                <i-option value="5000,20000">5000以上</i-option>
            </i-select>
            <i-select v-model="search.rentalhouse.ser_acreage" @on-change="handleChangeOther" style="width:110px" placeholder="面积">
                <i-option value="0">面积不限</i-option>
                <i-option value="1,50">50平米以下</i-option>
                <i-option value="50,70">50-70平米</i-option>
                <i-option value="70,90">70-90平米</i-option>
                <i-option value="90,110">90-110平米</i-option>
                <i-option value="110,130">110-130平米</i-option>
                <i-option value="130,150">130-150平米</i-option>
                <i-option value="150,200">150-200平米</i-option>
                <i-option value="200,2000">200平米以上</i-option>
            </i-select>
            <i-select v-model="search.rentalhouse.ser_room" @on-change="handleChangeOther" style="width:110px" placeholder="户型">
                <i-option value="0">户型不限</i-option>
                <i-option value="1">一室</i-option>
                <i-option value="2">二室</i-option>
                <i-option value="3">三室</i-option>
                <i-option value="4">四室</i-option>
                <i-option value="5">五室及以上</i-option>
            </i-select>
            <i-select v-model="search.rentalhouse.direction" style="width:100px" @on-change="handleChangeOther" placeholder="朝向">
                <i-option value="0">朝向不限</i-option>
                <i-option :value="item.id" v-for="item in search.direct" :key="item.id">@{{ item.name }}</i-option>
            </i-select>
            <i-select v-model="search.rentalhouse.floor" @on-change="handleChangeOther" style="width:110px" placeholder="楼层">
                <i-option value="0">楼层不限</i-option>
                <i-option value="低层">低层</i-option>
                <i-option value="中层">中层</i-option>
                <i-option value="高层">高层</i-option>
            </i-select>
            <i-select v-model="search.rentalhouse.renovation" @on-change="handleChangeOther" style="width:110px" placeholder="装修">
                <i-option value="0">装修不限</i-option>
                <i-option :value="item.id" v-for="item in search.renovate" :key="item.id">@{{ item.name }}</i-option>
            </i-select>
        </div>
    </div>

    <div v-if="loading" style="background:rgba(0,0,0,.1);position: absolute;left:0;top:160px;right:400px;bottom:0;z-index: 1;display: flex;justify-content: center;align-items: center;">
        <Spin size="large"></Spin>
    </div>
    <div  style="position: absolute;top:160px;left:0;right:0;bottom:0;width: 100%;display: flex;">
        <div id="allMap" style="height:100%;flex:1;z-index: -1;"></div>
        <div class="map-tags" v-show="search.type ==='hand'">
            <checkbox-group v-model="search.handroom.tags" @on-change="handleChangeOther">
                <Checkbox :label="item.id" v-for="item in search.tags">@{{ item.name }}</Checkbox>
            </checkbox-group>
        </div>
        <div class="map-tags" v-show="search.type ==='rental'">
            <radio-group v-model="search.rentalhouse.type"  @on-change="handleChangeOther">
                <Radio label="A">整租</Radio>
                <Radio label="B">合租</Radio>
            </radio-group>
        </div>
        <div :class="rightAttr" id="scroll">
            <div class="btn" @click="toggleCon">
                <Icon type="ios-arrow-forward"></Icon>
            </div>
            <div class="map-content">
                <div class="top">
                    <div class="tip" :class="{active:cur==0}" @click="changeSort">默认</div>
                    <div class="tip" :class="{active:cur==1}" @click="changePriceSort">
                        <span v-show="search.type ==='new'">售价</span>
                        <span v-show="search.type ==='hand'">总价</span>
                        <span v-show="search.type ==='rental'">月租</span>
                        <Icon type="md-arrow-dropdown" v-if="!search.newhouse.priceStatus"></Icon>
                        <Icon type="md-arrow-dropup" v-if="search.newhouse.priceStatus"></Icon>
                    </div>
                    <div class="tip" :class="{active:cur==2}" @click="changeTimeSort">
                        <span v-show="search.type ==='new'">开盘时间</span>
                        <span v-show="search.type ==='hand' || search.type ==='rental'">面积</span>
                        <Icon type="md-arrow-dropdown" v-if="!search.newhouse.timeStatus"></Icon>
                        <Icon type="md-arrow-dropup" v-if="search.newhouse.timeStatus"></Icon>
                    </div>
                </div>
                <div class="map-scroll">
                    <div class="loading" v-if="loading">
                        <Spin size="large"></Spin>
                    </div>
                    <Scroll :on-reach-bottom="handleReachBottom" :height="boxHeight">
                        <div class="list" v-for="item in scrollData" :key="item.id">
                            <div class="img">
                                <a :href="`/property/${item.id}`" target="_blank">
                                    <img :src="item.thumb" alt="">
                                </a>
                            </div>
                            <div class="desc">
                                <h3 class="nowrap">
                                    <a :href="`/property/${item.id}`" target="_blank">
                                        @{{ item.title }}
                                    </a>
                                </h3>
                                <div class="price">
                                    <span v-show="search.type === 'new'">@{{ item.average }}</span> @{{ item.average_unit }}
                                    <div class="hand" v-show="search.type === 'hand' || search.type === 'rental'">
                                        <div style="color:#333;font-size:12px;line-height:20px;flex-direction: column;">
                                            <div>@{{ item.room }}室@{{ item.hall }}厅&ensp;@{{ item.acreage }}㎡</div>
                                            <div class="apartname">@{{ item.communityname }}</div>
                                            <div class="tags" v-show="search.type === 'hand'">
                                            <span v-for="(tag,index) in item.tags" :key="index">
                                                <span v-for="itag in search.tags" :key="itag.id" v-if="itag.id == tag" class="tip">@{{ itag.name }}</span>
{{--                                                <span v-if="tag === 'B'" class="tip">满二唯一</span>--}}
                                                {{--                                                <span v-if="tag === 'C'" class="tip">房本在手</span>--}}
                                            </span>
                                            </div>
                                            <div class="tags" v-show="search.type === 'rental'">
                                                <span class="tip" v-if="item.rental_type === 'A'">整租</span>
                                                <span class="tip" v-if="item.rental_type === 'B'">合租</span>
                                            </div>
                                        </div>
                                        <span>
                                        @{{ item.price }}
                                        <i v-show="search.type === 'hand'">万</i>
                                        <i v-show="search.type === 'rental'">元/月</i>
                                    </span>
                                    </div>

                                </div>
                                <div class="apartment" v-show="search.type === 'new'">
                                    <div v-for="(itemson,index) in item.apartments" :key="itemson.id" v-show="search.type === 'new'">
                                        @{{ itemson.room }}室@{{ itemson.hall }}厅[@{{ itemson.acreage }}㎡]
                                        <span v-if="index < item.apartments.length - 1" >,</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nomore" v-if="!canloading">
                            @{{ nomore }}
                        </div>
                    </Scroll>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=2pOLT55iaTI8LVvPfirAgUDqaZa0sdnj"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script src="/static/home/js/maproom.js"></script>
@endsection